<template>
	<view class="city-select-page">
		
		<!-- 已选择区域 -->
		<view class="selected-area">
			<view class="selected-tag" :class="{ active: currentLevel >= 1 }" @click="switchLevel(1)">{{
				selectedProvince.name
				|| '请选择省份' }}</view>
			<view class="selected-tag" :class="{ active: currentLevel >= 2 }" @click="switchLevel(2)">{{ selectedCity.name ||
				'请选择城市' }}</view>
			<view class="selected-tag" :class="{ active: currentLevel >= 3 }" @click="switchLevel(3)">{{
				selectedDistrict.name
				|| '请选择区县' }}</view>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<view class="loading-text">加载中...</view>
		</view>

		<!-- 地区列表与索引容器 -->
		<view v-else class="city-container">
			<!-- 地区列表 -->
			<scroll-view class="city-list" scroll-y="true" :scroll-into-view="scrollToLetter"
				scroll-with-animation="true">
				<!-- 省份列表 -->
				<template v-if="currentLevel === 1">
					<view v-for="(letter, index) in Object.keys(regionData.provinces)" :key="index"
						:id="'province-' + letter" class="city-group">
							<view class="group-title">{{ letter }}</view>
							<view v-for="(province, pIndex) in regionData.provinces[letter]" :key="pIndex" class="city-item"
								:class="{ active: province.id === selectedProvince.id }" @click="selectProvince(province)">
								{{ province.name }}
							</view>
						</view>
					</template>

					<!-- 城市列表 -->
					<template v-else-if="currentLevel === 2">
						<view v-for="(letter, index) in Object.keys(regionData.cities)" :key="index"
							:id="'city-' + letter" class="city-group">
								<view class="group-title">{{ letter }}</view>
								<view v-for="(city, cIndex) in regionData.cities[letter]" :key="cIndex"
									class="city-item" :class="{ active: city.id === selectedCity.id }" @click="selectCity(city)">
									{{ city.name }}
								</view>
							</view>
						</template>

					<!-- 区县列表 -->
					<template v-else-if="currentLevel === 3">
						<view v-for="(letter, index) in Object.keys(regionData.districts)" :key="index"
							:id="'district-' + letter" class="city-group">
								<view class="group-title">{{ letter }}</view>
								<view v-for="(district, dIndex) in regionData.districts[letter]" :key="dIndex"
									class="city-item" :class="{ active: district.id === selectedDistrict.id }"
									@click="selectDistrict(district)">
									{{ district.name }}
								</view>
							</view>
						</template>
			</scroll-view>

			<!-- 右侧字母索引 -->
			<view class="letter-index">
				<view v-for="(letter, index) in getCurrentLetters()" :key="index" class="index-item"
					@click="scrollToLevelLetter(letter)">
					{{ letter }}
				</view>
			</view>
		</view>
	</view>
</template>
<script src="./selectedCity.js"></script>
<style lang="scss" src="./selectedCity.scss"></style>

